
<template>
  <!-- 系统账单管理 -->
  <div>
    <!-- {{ value }} -->
    <!-- 头部搜索 -->
    <div class="header">
      <el-date-picker
        v-model="value"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        clearable
        @change="change"
      />

      <el-select v-model="params.type" placeholder="请选择类型" clearable>
        <el-option label="充值" value="充值" />
        <el-option label="消费" value="消费" />
      </el-select>
      <el-select v-model="params.status" placeholder="请选择状态" clearable>
        <el-option label="正常" value="正常" />
        <el-option label="未支付" value="未支付" />
      </el-select>
      <el-select v-model="params.userId" placeholder="顾客编号" clearable>
        <el-option
          v-for="item in Id"
          :key="item.id"
          :label="item.username"
          :value="item.id"
        />
      </el-select>
      <el-button type="primary" @click="toSeach">查询</el-button>
    </div>
    <!-- 表格开始 -->
    <div class="table">
      <el-table :data="CustomerAccount.list" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="180" align="center" />
        <el-table-column
          prop="transferMoney"
          label="交易金额"
          width="180"
          align="center"
        />
        <el-table-column
          prop="transferTime"
          label="交易时间"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.transferTime | fmtDate }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="交易类型"
          width="180"
          align="center"
        />
        <el-table-column prop="status" label="状态" width="180" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === '正常'"
              type="success"
            >正常</el-tag>
            <el-tag
              v-if="scope.row.status === '未支付'"
              type="info"
            >未支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" align="center" />
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
        :current-page="params.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="CustomerAccount.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
// import { SystemAccount } from "@/api/account";
import { mapState } from 'vuex'
export default {
  data() {
    return {
      value: [],
      tableData: [],
      params: {
        page: 1,
        pageSize: 10,
        roleId: 6
      }
    }
  },
  computed: {
    ...mapState('account', ['CustomerAccount', 'Id'])
  },
  created() {
    // this.getSystemAccount();
    // 查询员工id
    this.$store.dispatch('account/getIds', this.params)
    this.$store.dispatch('account/CustomerAccounts', this.params)
  },
  mounted() {},
  methods: {
    handleSizeChange(pageSize) {
      this.params.page = 1
      this.params.pageSize = pageSize
      this.$store.dispatch('account/CustomerAccounts', this.params)
    },
    handleCurrentChange(page) {
      this.params.page = page
      this.$store.dispatch('account/CustomerAccounts', this.params)
    },
    // 查询
    toSeach() {
      // console.log(this.params);
      this.params.page = 1
      if (
        this.params.type ||
        this.params.status ||
        this.params.beginTime ||
        this.params.endTime ||
        this.params.userId
      ) {
        this.$store.dispatch('account/CustomerAccounts', this.params)
        // console.log(res, "系统账单");
      } else {
        delete this.params.type
        delete this.params.status
        delete this.params.userId
        this.$store.dispatch('account/CustomerAccounts', this.params)
      }
    },
    change() {
      if (this.value) {
        this.params.beginTime = this.value[0].getTime()
        this.params.endTime = this.value[1].getTime()
      } else {
        delete this.params.beginTime
        delete this.params.endTime
      }
    }
  }
}
</script>
<style lang="scss">
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
</style>
